// import ReactDOM from 'react-dom'
import { createRoot } from 'react-dom/client'
import { Component } from 'react'
// 1. 函数组件：使用JS的函数或者箭头函数创建的组件

// + 使用 JS 的函数(或箭头函数)创建的组件，叫做`函数组件`
// + 约定1：**函数名称必须以大写字母开头(标签名)**，React 据此区分组件和普通的 HTML标签
// + 约定2：**函数组件必须有返回值**，表示该组件的 UI(jsx) 结构；如果不需要渲染任何内容，则返回 `null`

function App() {
  //js逻辑
  const data = 100
  //html视图
  return (
    <div>
      <h1>我的第一个react函数组件</h1>
      <p>{data}</p>
    </div>
  )
}

const List = () => {
  return (
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  )
}

// 2. 类组件：- 使用 ES6 的 class 创建的组件，叫做类（class）组件
// - 约定1：**类名称也必须以大写字母开头**（标签名）
// - 约定2：类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
// - 约定3：类组件必须提供 render 方法
// - 约定4：render 方法必须有返回值，表示该组件的 UI 结构

class App2 extends Component {
  //js逻辑
  //html视图
  render() {
    return (
      <div>
        <h1>我的第一个类组件</h1>
      </div>
    )
  }
}

//测试渲染组件
const max = (
  <div className="box">
    <App></App>
    <App />
    <hr />
    <List />
    <hr />
    <App2 />
  </div>
)

// 老写法
// ReactDOM.render(tpl, document.getElementById('root'))
// 新写法
createRoot(document.getElementById('root')).render(max)
